<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻选择器</title>
    <link rel="stylesheet" href="/static/css/myDocPage.css">
    <style>

        /*
        功能:
            相邻选择器.
        说明:
            1. 相邻选择器要求两个元素必须相邻, 否则设置失效, 相邻选择器有以下要求:
                - 所涉及的相邻兄弟元素必须是该元素的同级元素。
                - 所涉及的相邻兄弟元素必须是相邻兄弟元素，中间若有其他元素隔开也将导致失效。
                - 元素A和对应的相邻兄弟元素之间需要用 +  隔开。
        */
        .one-brother h3 + h4 {
            color: beige;
            background-color: #00B83F;
        }

        /**
        说明:
            1. 这个选择器的意思是: 选择all-brother类下的h3标签的所有h4兄弟节点.
         */
        .all-brother h3~h4 {
            color: yellow;
            background-color: mediumvioletred;
        }

        .all-offspring h3 {
            color: red;
        }

        .one-offspring > h3 {
            color: #00b0ff;
        }

        .attribute-selector h3[title] {
            color: #00B83F;
        }

        .attribute-selector h3[filed-name] {
            color: red;
        }

        /**
        说明:
            1. 有多个属性选择器时, 这些属性之间是且的关系.
         */
        .attribute-selector h3[id][filed-name] {
            background-color: yellow;
        }

        .attribute-value-selector h3[id='s1'] {
            color: yellow;
        }

        .starting-order-selector h3[id^="my"] {
            background-color: red;
        }

        .starting-order-selector h3[id$="com"] {
            font-size: 30px;
        }

        /*
        说明:
            1. 这种选择模式相当于是like模糊匹配.
        */
        .starting-order-selector h3[id*="baidu"] {
            font-style: oblique;
        }

        /**
        说明:
            1. :nth-child(n)伪选择器根据参数的的不同而意义不同;
                - 设置为n时, 表示选中所有元素, n从1开始到最后一个;
                - 设置为2时, 表示选中第二个元素;
                - 如果设置为-n+2, 表示选中前两个元素;
                - 如果设置为n+2, 表示不选中前两个元素;
            2. :last-child表示选中最后一个元素;
         */
        .child-order-selector > ul li:nth-child(n):not(:nth-child(1)):not(:last-child) {
            color: red;
        }

    </style>
</head>
<body>
<div>
    <h1>一. 兄弟选择器</h1>
    <h2>1.1 所有兄弟元素选择器</h2>
    <div class="all-brother">
        <h3>demo1</h3>
        <h4>demo2</h4>
        <div>
            <h4>dd4</h4>
        </div>
        <h4>demo3</h4>
    </div>
    <h2>1.2 下一位兄弟选择器</h2>
    <div class="one-brother">
        <h3>demo1</h3>
        <h4>demo2</h4>
        <div>
            <h4>dd4</h4>
        </div>
        <h4>demo3</h4>
    </div>
</div>
<div>
    <h1>二. 后代选择器</h1>
    <h2>2.1 不限层级子元素选择器</h2>
    <div class="all-offspring">
        <h3>儿子1</h3>
        <h3>儿子2</h3>
        <div>
            <h3>孙子1</h3>
            <h3>孙子2</h3>
            <div>
                <h3>重孙子1</h3>
                <h3>重孙子2</h3>
            </div>
        </div>
        <h3>儿子3</h3>
    </div>
    <h2>2.2 单层级子元素选择器</h2>
    <div class="one-offspring">
        <h3>儿子1</h3>
        <h3>儿子2</h3>
        <div>
            <h3>孙子1</h3>
            <h3>孙子2</h3>
            <div>
                <h3>重孙子1</h3>
                <h3>重孙子2</h3>
            </div>
        </div>
        <h3>儿子3</h3>
    </div>
</div>
<div>
    <h1>三. 属性选择器</h1>
    <h2>3.1 存在多个属性选择器</h2>
    <div class="attribute-selector">
        <h3 title="b1">标签1</h3>
        <h3 filed-name="name">标签2</h3>
        <h3 filed-name="age">标签3</h3>
        <h3 filed-name="address" id="address">标签4</h3>
        <h3 id="tag">标签5</h3>
    </div>
    <h2>3.2 属性值选择器</h2>
    <div class="attribute-value-selector">
        <h3 id="s1">我是第一个</h3>
        <h3 id="s2">我是第二个</h3>
    </div>
    <h2>3.3 属性值首位匹配选择器</h2>
    <div class="starting-order-selector">
        <h3 id="myId.com">第1个标签</h3>
        <h3 id="myId.cn">第2个标签</h3>
        <h3 id="www.baidu.com">第3个标签</h3>
        <h3 id="baidu.com">百度1</h3>
        <h3 id="www.baidu">百度2</h3>
    </div>
    <h2>3.4 子元素序号选择器</h2>
    <div class="child-order-selector">
        <ul>
            <li>第1个</li>
            <li>第2个</li>
            <li>第3个</li>
            <li>第4个</li>
        </ul>
    </div>
</div>
</body>
</html>